<template>
    <div class="common-layout">
        <el-container class="w-screen h-screen">
            <!--      顶部栏-->
            <el-header class="flex justify-between items-center border-b-gray-300 border">
                <div class="flex flex-row">
                    <span class="font-bold text-lg">动物管理系统</span>
                </div>

                <div class="flex flex-row" v-if="USER.role=='4'||USER.role=='3'">
                    <div  style="display: flex; align-items: center;font-size: 15px">
                        <el-icon v-if="true" style="color: red;font-size: 50px" ><WarnTriangleFilled /> </el-icon><div>当前体重异常的动物个数：{{num}}</div>
                    </div>
                </div>

                <div>
                   <el-dropdown>
                       <div class="flex flex-row items-center gap-1 p-2 rounded-md hover:bg-gray-300">
                           <svg class="w-7 h-7" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" ><path fill="currentColor" d="M288 320a224 224 0 1 0 448 0 224 224 0 1 0-448 0m544 608H160a32 32 0 0 1-32-32v-96a160 160 0 0 1 160-160h448a160 160 0 0 1 160 160v96a32 32 0 0 1-32 32z"></path></svg>
                         <span class="text-lg">{{ CurretUser.nickname }}</span>
                       </div>
                       <template #dropdown>
                         <el-dropdown-menu>
                           <el-dropdown-item @click="isFlag.dialogVisbaleEditCurretUserInfo=true">个人信息</el-dropdown-item>
                           <el-dropdown-item @click="HandlePasswoed">修改密码</el-dropdown-item>
                           <el-dropdown-item @click="logout()">退出</el-dropdown-item>
                         </el-dropdown-menu>
                       </template>
                   </el-dropdown>
                </div>
            </el-header>

            <!-- 修改个人信息弹窗 -->
            <el-dialog v-model="isFlag.dialogVisbaleEditCurretUserInfo" title="个人信息" width="500" center>
                <el-form label-width="100px">
                    <el-form-item label="名称:">
                      <el-input v-model="CurretUser.nickname"></el-input>
                    </el-form-item>
                    <el-form-item label="电话:">
                      <el-input v-model="CurretUser.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="负责类型:">
                      <span>   {{CurretUser.type}}</span>
                    </el-form-item>
                    <el-form-item label="职业:">
                        <span>   {{CurretUser.job}}</span>
                    </el-form-item>
                    <el-form-item label="权限:">
                     <span>   {{CurretUser.role}}</span>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="isFlag.dialogVisbaleEditCurretUserInfo = false">取消</el-button>
                        <el-button type="primary"@click="EditCurretUserInfo">修改</el-button>
                    </div>
                </template>
            </el-dialog>
            <!-- 修改密码弹窗 -->
            <el-dialog v-model="isFlag.dialogVisbaleEditCurretUserPassword" title="修改密码">
                <el-form label-width="100px">
                    <el-form-item label="原密码:">
                        <el-input v-model="PasswordInput.OriginalPassword"></el-input>
                    </el-form-item>
                    <el-form-item label="新密码:">
                        <el-input  v-model="PasswordInput.NewPassword"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码:">
                        <el-input  v-model="PasswordInput.Confirmpassword"></el-input>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="isFlag.dialogVisbaleEditCurretUserPassword = false">取消</el-button>
                        <el-button type="primary"@click="EditCurretUserPassword(PasswordInput)" >修改</el-button>
                    </div>
                </template>
            </el-dialog>
            <el-container>
                <!--        侧边栏-->
                <el-aside width="200px">
                    <el-menu default-active="2" background-color="" class="h-full bg-gray-800">

                        <router-link to="/index/">
                            <el-menu-item index="first">
                                <el-icon><Position/></el-icon>
                                <span>系统首页</span>
                            </el-menu-item>
                        </router-link>

                        <router-link to="/index/userEdit" v-if=" USER.role === '4'">
                            <el-menu-item index="user">
                                <el-icon><User/></el-icon>
                                <span>成员管理</span>
                            </el-menu-item>
                        </router-link>
                      <router-link to="/index/animalWatch" v-if="USER.role === '3' || USER.role === '4'">
                        <el-menu-item index="watch">
                          <el-icon><User/></el-icon>
                          <span>动物监控</span>
                        </el-menu-item>
                      </router-link>

                        <router-link to="/index/animalEdit" v-if="USER.job!='医生'">
                                <el-menu-item index="animalEdit">
                                    <el-icon>
                                        <setting/>
                                    </el-icon>
                                    <span>动物信息</span>
                                </el-menu-item>
                            </router-link>
                        <el-sub-menu index="animalFile" v-if="USER.job!='医生'">
                            <template #title>
                                <el-icon><document/></el-icon>
                                <i class="el-icon-menu"></i><span>动物档案</span>
                            </template>

                            <router-link to="/index/animalRecord" >
                                <el-menu-item index="animalRecord">
                                    <el-icon><document/></el-icon>
                                    <span>动物档案</span>
                                </el-menu-item>
                            </router-link>
                            <router-link to="/index/feedRecord" v-if="USER.job!='医生'">
                                <el-menu-item index="feedRecord">
                                    <el-icon><document/></el-icon>
                                    <span>动物饲养记录</span>
                                </el-menu-item>
                            </router-link>
                            <router-link to="/index/medicalRecord">
                                <el-menu-item index="medicalRecord">
                                    <el-icon>
                                        <document/>
                                    </el-icon>
                                    <span>动物医疗记录</span>
                                </el-menu-item>
                            </router-link>
                        </el-sub-menu>


                        <router-link to="/index/medicalRecord" v-if="USER.job=='医生'">
                            <el-menu-item index="medicalRecord">
                                <el-icon>
                                    <document/>
                                </el-icon>
                                <span>动物医疗记录</span>
                            </el-menu-item>
                        </router-link>


                    <router-link to="/index/doctorWorkRecord" v-if="USER.job=='医生'">
                        <el-menu-item index="doctorWorkRecord">
                            <el-icon>
                                <document/>
                            </el-icon>
                            <span>医生处理记录</span>
                        </el-menu-item>
                    </router-link>
                    </el-menu>
                </el-aside>
                <!--        主体-->
                <router-view>

                </router-view>
            </el-container>
        </el-container>
    </div>
</template>


<script setup lang="ts">
import {reactive, ref} from 'vue'
import axios, {request} from "axios";
import router from "../../router.ts";
import {ElMessage} from "element-plus";
import {count} from "echarts/types/src/component/dataZoom/history";



const USER = JSON.parse(localStorage.getItem('user'));

const  num=ref();
const CurretUser = ref([])
  function inituser(){
    axios.get('http://localhost:8080/user/find?id='+USER.id)
        .then(request =>{
          CurretUser.value = request.data
            console.log(USER)
        })

      axios.get('http://localhost:8080/watch/size')
          .then(request =>{
              num.value=request.data
          })

  }
setInterval(inituser, 5000);
inituser();

const isFlag = reactive({
  dialogVisbaleEditCurretUserInfo: false,
  dialogVisbaleEditCurretUserPassword: false,
})
const PasswordInput = reactive({
  OriginalPassword:'',
  NewPassword:'',
  Confirmpassword:'',
})



function logout(){
    localStorage.removeItem('user')
    router.push("/")
}
function EditCurretUserInfo(){
  console.log(CurretUser)
  axios.post('http://localhost:8080/user/update',CurretUser.value)
      .then(request =>{
        console.log(request.data)
        if (request.data){
          ElMessage({
            message:'修改成功',
            type:'success'
          })
          isFlag.dialogVisbaleEditCurretUserInfo = false;
        }
      })
}
function HandlePasswoed(){
  PasswordInput.OriginalPassword="";
  PasswordInput.NewPassword="";
  PasswordInput.Confirmpassword="";
  isFlag.dialogVisbaleEditCurretUserPassword=true;
}
function EditCurretUserPassword(PasswordInput){
 if(PasswordInput.OriginalPassword!=CurretUser.value.password){
   ElMessage({
     message:'原密码不正确',
     type:'warning'
   })
 }
  if(PasswordInput.NewPassword!=PasswordInput.Confirmpassword){
    ElMessage({
      message:'两次输入的新密码并不一致，请重新输入',
      type:'warning'
    })
  }
  if(PasswordInput.NewPassword==PasswordInput.Confirmpassword && PasswordInput.OriginalPassword==CurretUser.value.password){
    CurretUser.value.password=PasswordInput.NewPassword;
    console.log(CurretUser)
    axios.post('http://localhost:8080/user/update',CurretUser.value)
        .then(request =>{
          console.log(request.data)
          if (request.data){
            ElMessage({
              message:'修改成功',
              type:'success'
            })
            isFlag.dialogVisbaleEditCurretUserPassword = false;
          }
        })
  }

}


</script>
